<html>
  <head>
    <title>picker</title>
  </head>
  <body>
    <script>
      // picker

            /*
                一、概述

                        从底部弹起的滚动选择器。支持五种选择器，通过 mode来区分，
                        
                        分别是  "普通选择器"、"多列选择器"、"时间选择器"、"日期选择器"、"省市区选择器"，

                        默认是普通选择器
            */

            /*
                 二、普通选择器

                        mode= selector


                        <1>、属性选择器

                                        属性名	          类型	                默认值	    说明	                                                      平台差异说明

                                      1、range	        Array /
                                                        Array<Object>         	[]	      mode为 selector 或 multiSelector 时，range 有效	

                                      2、range-key	    String		                        当 range 是一个 Array＜Object＞ 时，
                                                                                          通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

                                      3、value	        Number	                0	        value 的值表示选择了 range 中的第几个（下标从 0 开始）	

                                      4、selector-type	String	                auto	    UI类型,仅大屏时该属性生效，支持 picker、select、auto，
                                                                                          默认在 iPad 以 picker 样式展示而在 PC 以 select 样式展示	      H5 2.9.9+

                                      5、disabled	      Boolean	                false	    是否禁用	                                                  快手小程序不支持

                                      6、@change	      EventHandle		          value     改变时触发 change 事件，event.detail = {value: value}	

                                      7、@cancel	      EventHandle		                    取消选择或点遮罩层收起 picker 时触发	                        快手小程序不支持


                            ★、picker 在个平台的实现是由UI差异的，有的平台如百度、支付宝小程序的Android端时从中间弹出的；

                                有的平台支持循环滚动如百度小程序；有的平台没有取消按钮如App-ios端。但均不影响功能使用
            */

            /*
                  三、多列选择器

                            mode = multiSelector

                            <1>、平台差异说明

                                      App	            H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序	元服务
                                      vue支持，
                                      nvue自2.4起支持	 √	 √	          x	          √         	√                   	√	        √	        √	          x

                                  ★、支付宝小程序 picker 组件不支持多列选择，可以使用 picker-view 组件代替


                            <2>、属性说明

                                         属性名	          类型	                            默认值	说明

                                      1、range	        二维 Array / 二维 Array＜Object＞	    []	    mode为 selector 或 multiSelector 时，
                                                                                                    range 有效。二维数组，长度表示多少列，
                                                                                                    数组的每项表示每列的数据，如[["a","b"], ["c","d"]]

                                      2、range-key	    String		                                  当 range 是一个二维 Array＜Object＞ 时，
                                                                                                    通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

                                      3、value	        Array	                                []	  value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）

                                      4、@change	      EventHandle		                              value 改变时触发 change 事件，event.detail = {value: value}

                                      5、@columnchange	EventHandle		                              某一列的值改变时触发 columnchange 事件，
                                                                                                    event.detail = {column: column, value: value}，
                                                                                                    column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标

                                      6、@cancel	      EventHandle		                              取消选择时触发（快手小程序不支持）

                                      7、disabled	      Boolean	                             false  是否禁用（快手小程序不支持）



                                ★、bug & tips

                                        ①、由于JS的限制vue不能观测如下方式设置 value: this.value[0]=0;  （突变检测不到）

                                        ②、微信开发工具的pc模拟器有可能出现拖动数据错乱，使用真机正常

            */

            /*
                  四、时间选择器

                            mode=time

                            <1>、平台差异说明

                                        App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序	元服务
                                        √	  √   √	          √	             √	         √	                 √	       x	          √	        x

                                  ★、时间选择在App端调用的是os的原生事件选择控件，在不同平台有不同的UI表现

                            <2>、属性说明

                                      属性名	    类型	        默认值	  说明	                        平台差异说明

                                    1、value	  String		              表示选中的时间，格式为"hh:mm"	

                                    2、start	  String		              表示有效时间范围的开始，字符串格式为"hh:mm"	App 不支持

                                    3、end	    String		              表示有效时间范围的结束，字符串格式为"hh:mm"	App 不支持

                                    4、@change	EventHandle		          value 改变时触发 change 事件，event.detail = {value: value}	

                                    5、@cancel	EventHandle		          取消选择时触发	

                                    6、disabled	Boolean	        false	  是否禁用
            */


            /*
                  五、日期选择器

                              mode=date

                              <1>、平台差异说明

                                        App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序	元服务
                                          √	√	    √	        √	            √	        √	                    √	        x	        √	          x

                                    日期选择默认在 App端和H5端(PC版Chrome以及PC版FireFox)调用的是os的原生日期选择控件，
                                  
                                    在不同平台有不同的ui表现，当配置fields 参数后使用统一的展示方式。

                              <2>、属性说明

                                      属性名	    类型	      默认值	          说明	                                                            平台差异说明

                                  1、value	    String	      0	      表示选中的日期，格式为"YYYY-MM-DD"	

                                  2、start	    String		            表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"	

                                  3、end	      String		            表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"	

                                  4、fields	    String	      day	    有效值 year、month、day，表示选择器的粒度，默认为 day，
                                                                      App 端未配置此项时使用系统 UI	                            H5、App 2.6.3+、微信小程序、支付宝小程序、百度小程序、抖音小程序、飞书小程序
                                  
                                  5、@change	EventHandle		  value   改变时触发 change 事件，event.detail = {value: value}	
                                  
                                  6、@cancel	EventHandle		          取消选择时触发	
                                  
                                  7、disabled	  Boolean	      false	  是否禁用	


                              <3>、fields 有效值

                                            值	        说明

                                        1、year	    选择器粒度为年

                                        2、month	  选择器粒度为月份

                                        3、day	    选择器粒度为天
            */
            
            /*
                  六、省市区选择器

                            mode  = region

                            <1>、平台差异说明

                                      App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序	元服务
                                      x	  x	  √	         x	           √	          √	                  √	        x	            √	      x

                              
                                      小程序凭条在引擎层面内置了省市区数据。 但省市区包含大量数据，占用体积，并非所有应用都需要，且很多城市数据有自维护需求，所以在App和H5平台

                                      没有在前端内置这些数据。可以基于多列picker或picker-view ，自定填充城市数据。
                                      
                                      插件市场有较多类似插件，详见：https://ext.dcloud.net.cn/search?q=%E5%9F%8E%E5%B8%82%E9%80%89%E6%8B%A9

                                      注意基于多列picker方式的地区选择不能运行子支付宝小程序上，只有基于 picker-view 的可全段运行。
                                      
                                      尤其推荐插件： uni-data-picker，自带省市区的联网数据，自带懒加载


                             <2>、属性说明

                                        属性名	        类型	        默认值	    说明

                                      1、value	      Array	           []	     表示选中的省市区，默认选中每一列的第一个值、

                                      2、custom-item	String		                可为每一列的顶部添加一个自定义的项

                                      3、@change	    EventHandle		            value 改变时触发 change 事件，event.detail = {value: value}

                                      4、@cancel	    EventHandle		            取消选择时触发（快手小程序不支持）

                                      5、disabled	    Boolean	false	            是否禁用（快手小程序不支持）

            */

            /*
                  七、示例

                              url: https://uniapp.dcloud.net.cn/component/picker.html
            */
    </script>
  </body>
</html>